<template>
    <div class="video-uploader">
      <el-upload
        class="uploader"
        :action="action"
        :auto-upload="false"
        :on-change="handleFileChange"
        :on-remove="handleFileRemove"
        :file-list="fileList"
        :multiple="false"
        :limit="1"
        :drag="true"
        :accept="acceptTypes"
      >
        <el-icon><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            {{ tipText }}
          </div>
        </template>
      </el-upload>
  
      <div class="upload-actions">
        <el-button 
          type="primary" 
          @click="submitUpload" 
          :loading="uploading" 
          :disabled="!hasFile || uploading"
        >
          上传视频
        </el-button>
      </div>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, computed } from 'vue';
  import { UploadFilled } from '@element-plus/icons-vue';
  import introOutroService from '@/services/introOutroService';
  
  export default defineComponent({
    name: 'VideoUploader',
    components: {
      UploadFilled
    },
    props: {
      videoType: {
        type: String,
        required: true,
        validator: (value) => ['opening', 'ending'].includes(value)
      },
      metadata: {
        type: Object,
        default: () => ({})
      }
    },
    emits: ['upload-success', 'upload-error'],
    setup(props, { emit }) {
      const fileList = ref([]);
      const uploading = ref(false);
      const action = ''; // 使用空字符串，因为我们使用手动上传
  
      // 计算提示文本
      const tipText = computed(() => {
        return props.videoType === 'opening' 
          ? '请上传片头视频文件，支持MP4, AVI, MOV格式' 
          : '请上传片尾视频文件，支持MP4, AVI, MOV格式';
      });
  
      // 接受的文件类型
      const acceptTypes = '.mp4,.avi,.mov,.MP4,.AVI,.MOV';
  
      // 判断是否有文件可上传
      const hasFile = computed(() => fileList.value.length > 0);
  
      // 文件改变事件
      const handleFileChange = (file) => {
        if (file.status === 'ready') {
          fileList.value = [file];
        }
      };
  
      // 移除文件事件
      const handleFileRemove = () => {
        fileList.value = [];
      };
  
      // 提交上传
      const submitUpload = async () => {
        if (!hasFile.value) return;
  
        uploading.value = true;
        try {
          const file = fileList.value[0].raw;
          const result = await introOutroService.uploadVideo(file, props.videoType, props.metadata);
          
          if (result.success) {
            emit('upload-success', result.data);
            fileList.value = [];
          } else {
            emit('upload-error', result.message || '上传失败');
          }
        } catch (error) {
          emit('upload-error', error.message || '上传时发生错误');
        } finally {
          uploading.value = false;
        }
      };
  
      return {
        fileList,
        uploading,
        action,
        tipText,
        acceptTypes,
        hasFile,
        handleFileChange,
        handleFileRemove,
        submitUpload
      };
    }
  });
  </script>
  
  <style scoped>
  .video-uploader {
    margin-bottom: 20px;
  }
  
  .uploader {
    width: 100%;
  }
  
  .upload-actions {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
  </style>